const path = require('path'); 

const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

const isProd = process.env.NODE_ENV === 'production' // 是否是生产环境

function resolve(dir) {
    return path.resolve(__dirname, dir)
}

// 创建插件对象
const htmlWebpackPlugin = new HtmlWebpackPlugin({
    // 使用我们自己定义的index.html作为首页的模板，并且会把dist/main.js引入到html中，
    // 并且，将index.html复制到根目录中
    template: resolve("./public/index.html"), 
    filename: 'index.html' // 复制出来的文件名
});

const clearWebpackPlugin = new CleanWebpackPlugin({})

module.exports = {
    mode: isProd ? 'production':'development',
    entry: resolve("./src/main.ts"),//入口文件
    output: {
        filename: '[name].[contenthash:8].js',//编译出来的文件名
        path: resolve('dist'),//编译文件所在目录   
    },
    module: {
        rules: [
            {
                // For our normal typescript
                test: /\.ts?$/,
                use: [
                    {
                        loader: 'ts-loader'
                    }
                ],
                include:[resolve('src')],
                exclude: /(?:node_modules)/,
            },
        ]
    },
    resolve: {
        modules: [
            'src',
            'node_modules'
        ],
        extensions: [
            '.js',
            '.ts'
        ]
    },
    // 使用插件扩展webpack的功能
    plugins: [htmlWebpackPlugin,clearWebpackPlugin],
    devServer: {
        port: 8081
  }, 
  devtool:'source-map',
 };